Dopo aver esaminato una possibile struttura per una Home Page, avremo sicuramente voglia di renderla più accattivante attraverso l'uso dei colori. Le raccomandazioni del W3C riguardo l'uso dei colori nel web si riassumono in quella che è la tabella dei colori detti "web-safe" ovvero sicuri per il web.

Non tutti i colori sono sicuri, ma solo quelli riportati nella tabella qui sotto. La sicurezza va intesa nei termini in cui essi sono compatibili con qualsiasi user agent : nello specifico con i browser. Usando i colori della tabella in notazione esadecimale, siamo certi che verranno interpretati nel modo corretto da qualsiasi utente. La notazione esadecimale è composta di sei caratteri (cifre e lettere) davanti ai quali occorre mettere uno sharp o cancelletto. Per esempio il bianco viene annotato come ffffff, dunque sarà: #ffffff.

Nell'ambito di questi colori si è liberi di combinarli a piacimento, ricordiamoci però che le teorie grafiche ci insegnano che la somma dei colori usati, affinché sia piacevole alla vista, deve dare come risultato il grigio; per capire meglio è come se avessimo la famosa tavolozza di colori di un pittore, mescolandoli deve uscire fuori il grigio. Sembrerà strano ma molti professionisti del web mescolano materialmente alcuni colori a tempera per vedere se formano il grigio.

Dopo aver dato un' occhiata alla tavola dei colori web-safe, vediamo come implementarli nel nostro file css:
 

Per prima cosa aggiungeremo al file anche l'elemento body, in modo da colorare lo sfondo della pagina con l'istruzione background-color:

body { background-color: #ffffcc;}

#testa{position:absolute;top:0px;width:100%; height:100px; border:1px solid #000000; background-color: #336666;}

#menu {position:absolute;top:110px; width:200px;height:350px; border:1px solid #000000; background-color:#0066cc; }

#corpo {margin:0px 0px 0px 205px;position:absolute;top:110px;width:500px;height:350px; border:1px solid #000000; background-color:#ffffff;}

#piede {position:absolute;top:500px;width:100%; height:50px; border:1px solid #000000; background-color:#ffff00;}

Questa combinazione di colori è assolutamente errata e ci si rende subito conto che qualcosa non funziona…ma potrebbe piacere: sui gusti non si può discutere. In ogni caso nel livello testa ed in quello menù l'errore è troppo grossolano per non correggerlo: i caratteri del testo non si leggono bene; occorre colorarli con l'attributo color, che va usato così perché in quanto a color si intende il colore dei font ossia dei caratteri:

body { background-color: #ffffcc;}

#testa{position:absolute;top:0px;width:100%; height:100px; border:1px solid #000000; background-color: #336666; color:#ffffff;}

#menu {position:absolute;top:110px; width:200px;height:350px; border:1px solid #000000; background-color:#0066cc;colorf:#ffffff; }

#corpo {margin:0px 0px 0px 205px;position:absolute;top:110px;width:500px;height:350px; border:1px solid #000000; background-color:#ffffff;}

#piede {position:absolute;top:500px;width:100%; height:50px; border:1px solid #000000; background-color:#ffff00;}

Anche in questo modo non va bene : infatti nel livello menù ci sono caratteri ma appartengono ad un link che proprio non si vede. I link richiedono infatti che venga specificato a parte ogni loro attributo; non possono essere trattati come un normale font. Correggiamo questo difetto colorando il link:

body { background-color: #ffffcc;}

#testa{position:absolute;top:0px;width:100%; height:100px; border:1px solid #000000; background-color: #336666; color:#ffffff;}

#menu {position:absolute;top:110px; width:200px;height:350px; border:1px solid #000000; background-color:#0066cc;colorf:#ffffff; }

#corpo {margin:0px 0px 0px 205px;position:absolute;top:110px;width:500px;height:350px; border:1px solid #000000; background-color:#ffffff;}

#piede {position:absolute;top:500px;width:100%; height:50px; border:1px solid #000000; background-color:#ffff00;}

a:link {color:#ffffff;}

a:visited {color:#ffff00;}

a:active {color:#ff3300;}

a:hover{color:#ff00ff;}

In questo modo abbiamo aggiunto altre quattro istruzioni al nostro file css: vediamole nel particolare. Nella riga a:link viene specificato che tutti i link (a=link) devono essere di colore bianco. Visited sta per visitati, active contrassegna gli ancoraggi che l'utente ha in uso, mentre hover contrassegna il passaggio del mouse sopra il link.

Rileviamo come continua a riempirsi il foglio css, mentre la index è rimasta così come era. Questo è il grande vantaggio di un corretto uso dell' XHTML: poche istruzioni per il documento da visualizzare consentono una veloce interpretazione da parte degli user agent. In poche parole le pagine web vengono caricate in tutta velocità.

Tratto da: www.webmasterpoint.org